JS API
语言相关 数组 建立 通过变量赋值为 [] 来建立一个数组 ： var x=[]; // x 是一个数组 注意数组的下标从 0 开始 获取长度 通过 length 属性来获得 ： var x=1,2; console.log(x.length); // => 2 合并数组 调用 concat 函数产生一个新的合并后的函数 : var x=1,2; console.log(x.concat(3,4)); // => 1,2,3,4 console.log(x); // => 1,2 转化为字符串 调用 join 将数组中的元素以分隔符合并为一个字符串 var x=1,2; console.log(x.join(":")); // => 1:2 弹出最后一个元素 调用 pop 弹出数组的最后一个元素并返回 var x=1,2; console.log(x.pop()); // => 2 console.log(x); // => 1 添加元素到数组尾部 调用 push 添加新元素到数组尾部 var x=1,2; console.log(x.push(3)); console.log(x); // => 1,2,3 倒转数组元素的位置 调用 reverse 来颠倒数组元素的位置 var x=1,2; x.reverse(); console.log(x); // => 2,1 弹出数组的第一个元素并返回 调用 shift 弹出数组的第一个元素并返回 var x=1,2; console.log(x.shift()); // => 1 console.log(x); // => 2 添加元素到数组头部 调用 unshift 添加新元素到数组头部 var x=1,2; console.log(x.unshift(3)); console.log(x); // => 3,1,2 获取子数组 调用 slice 获取数组指定范围的子数组 var x=1,2,3,4,5,6; console.log(x.slice(1,3)); // => 2,3 console.log(x); // => 1,2,3,4,5,6 替换数组元素 调用 splice 将数组的连续元素替换为另外一批元素 var x=1,2,3,4; console.log(x.splice(1,2,5,6)); // => 2,3 ，替换从第1个下标开始的两个数为 5,6，并返回被替换的数组成的数组 console.log(x); // => 1,5,6,4 排序 调用 sort 对数组进行排序，默认为从小到大，也可以自定义排序规则 var x=1,3,2,4; console.log(x.sort()); // =>1,2,3,4 . 默认从小到大排序 console.log(x.sort(function(a,b){return b-a;})); // => 4,3,2,1. 也可从大到小 循环 调用 forEach 对数组进行循环处理。 1,2,3.forEach(function(i){ console.log(i); // =>1,2,3 }) 索引 调用 indexOf 正向查找某个值在数组中的索引位置 var index = 1,5,3,2,77,88.indexOf(3); console.log(index); //=> 2 索引 调用 lastIndexOf 反向查找某个值在数组中的索引位置, 与indexOf的方法不同在于开始查找的位置。 var index = 1,5,3,2,77,88.lastIndexOf(3); console.log(index); //=> 2 循环 调用 map对数组进行循环处理. 类似于forEach，不同的是提供了index 索引的值 var x = "apple","num","item1","origin"; x.map(function(item, index){ console.log(item,index); }); //结果如下： //apple 0 //num 1 //item1 2 //origin 3 对数组中每一个元素执行回调函数 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。 回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。 var x = 1,3,5,6,7,8,9; var flag = x.every(function(a){ return a > 4; }); console.log(flag); // => false var flag2 = x.every(function(a){ return a > 0; }); console.log(flag2); // => true console.log(x); // =>1,3,5,6,7,8,9 对数组中每一个元素执行回调函数 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回true，如果发现这个元素，some 将返回true，如果回调函数对每个元素执行后都返回 false ，some 将返回false。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。 回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。 var x = 1,3,5,6,7,8,9; var flag = x.some(function(a){ return a > 4; }); console.log(flag); // => true var flag2 = x.every(function(a){ return a < 0; }); console.log(flag2); // => false console.log(x); // =>1,3,5,6,7,8,9 对数组中每一个元素执行回调函数 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回true，如果发现这个元素，some 将返回true，如果回调函数对每个元素执行后都返回 false ，some 将返回false。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。 回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。 var x = 1,3,5,6,7,8,9; var flag = x.some(function(a){ return a > 4; }); console.log(flag); // => true var flag2 = x.every(function(a){ return a < 0; }); console.log(flag2); // => false console.log(x); // =>1,3,5,6,7,8,9 过滤数组 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。 回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。 var x = 1,3,5,6,7,8,9; var newx = x.filter(function(a){ return a > 4; }); console.log(x); // => 1,3,5,6,7,8,9 console.log(newx); // => 6, 7, 8, 9 对象 建立 通过对变量赋值 {} 建立对象 var x={}; // x 是一个对象 判断属性包含 调用 hasOwnProperty 判断对象是否包含某个属性 var x={ z:1 }; console.log(x.hasOwnProperty("z")); // => true console.log(x.hasOwnProperty("y")); // => false 函数 建立 通过函数声明或将变量赋值函数表达式创建一个函数 function x(){} // 通过函数声明创建函数 var y=function(){}; // 通过函数表达式创建函数 调用 通过函数名加()传入参数后调用相关函数 function x(a,b){return a+b;} x(1,2); // => 3 指定this调用 调用函数的 call/apply 可以指定函数内的 this 值 ,call 传参和普通调用一致,apply 则需要传入参数数组. function x©{return this.a+this.b+c;} x.call({a:1,b:2},3); // => 6 , 参数列表可直接传递 x.apply({a:1,b:2},3); // => 6 , 参数列表需要包装为数组 字符串 建立 通过变量赋值 " 包裹的字符串创建 var x="123"; // => x 为包含 123 的字符串 注意：字符串的字符下标从 0 开始. 从unicode中产生 调用 String.fromCharCode 从给定的 unicode 数值得到包含一个字符的字符串 var x=String.fromCharCode(65); // => "A" 得到指定下标的字符 调用 charAt 得到包含指定下标的字符的字符串 var x="abc".charAt(0); // => "a" 得到指定下标的字符的unicode值 调用 charCodeAt 得到指定下标的字符的unicode值 var x="ABC".charCodeAt(0); // => 65 合并字符串 通过 + 操作符合并两个字符串 "abc"+"123" // => "abc123" 查找子串的首次出现位置 调用 indexOf 获取子串的首次出现位置 "a123bc123de".indexOf("123") // => 1 查找子串最后一次出现位置 调用 lastIndexOf 获取子串的末次出现位置 "a123bc123de".lastIndexOf("123") // => 6 获取子串 调用 slice 获取字符串指定范围的子串 "a123bc123de".slice(1,4)// => 123 , 获取下标位于 1-4 范围内的子串（包括1，不包括4） 转化小写 调用 toLowerCase 返回源字符串的小写形式 "ABC".toLowerCase() // => "abc" 转化大写 调用 toUpperCase 返回源字符串的大写形式 "abc".toUpperCase() // => "ABC" 获取正则匹配结果 调用 match 并传入正则表达式得到正则匹配的结果，具体返回结果和正则表达式相关 如果设置了全局标志，返回所有的匹配项 "1 加 2 等于 3".match(/\d+/g) // => "2", "3" 否则返回第一个匹配项以及它的捕获分组 var url = /(\w+):\/\/(\w.+)\/(\S*)/; var text = "访问淘宝 http://www.taobao.com/index.php http://www.etao.com/"; var result = text.match(url); if (result != null) { var fullurl = result0; // => "http://www.taobao.com/index.php" var protocol = result1; // => "http" var host = result2; // => "www.taobao.com" var path = result3; // => "index.php" } 查找匹配正则的起始位置 调用 search 返回匹配正则的起始位置 var s="TaoBao 开放 js"; s.search(/t.o/i) // => 0 s.search(/x+/) // => -1 分割字符串为数组 调用 split 将字符串依据传入的分割符分割为数组 分隔符为字符串 "1:2:3:4:5".split(":"); // => "1","2","3","4","5" 分隔符为正则 "1::2:3:4:5".split(":"); // => "1","","2","3","4","5" "1::2:3:4:5".split(/:+/); // => "1","2","3","4","5" 如果正则为括号起始，则匹配到的分隔符也包含在返回结果中 "1::2:3:4:5".split(/(:)/); // => "1",":","",":","2",":","3",":","4",":","5" 替换子串 调用 replace 将正则匹配到的子串替换为指定的字符串 替换为指定的字符串,注意字符串中 $ 具有特殊含义: $1 表示第一个捕获分组 ... $& 表示匹配字符串 "tao bao".replace(/(\w+) (\w+)/g,"$2 $1") // => "bao tao" 替换为指定的函数返回结果，改函数传入参数：匹配字符串以及各个匹配分组 "tao bao".replace(/(\w+)/g,function(w){ return w.charAt(0).toUpperCase()+w.slice(1); }); //=> Tao Bao 去掉字符串两边的空格 调用 trim 去掉字符串两边的空格 " abc " // => "abc" 数字 最大正数 通过 Number.MAX_VALUE 来获取最大正数 console.log(Number.MAX_VALUE); 最小正数 通过 Number.MIN_VALUE 来获取最小正数 console.log(Number.MIN_VALUE); 正溢出值 Number.POSITIVE_INFINITY 表示运算正溢出时的值 console.log(1/0 Number.POSITIVE_INFINITY); 负溢出值 Number.NEFATIVE_INFINITY 表示运算负溢出时的值 console.log(-1/0 Number.NEFATIVE_INFINITY); 小数点位数控制 调用 toFixed 返回代表限定小数点位数的字符串 var n = 12345.6789; n.toFixed( ); // => '12346': 去除小数点的数字 n.toFixed(1); // => '12345.7': 保留一位，进行四舍五入 n.toFixed(6); // => '12345.678900' 保留六位，不足补零 (1.23e+20).toFixed(2); // => '123000000000000000000.00' (1.23e-10).toFixed(2) // => '0.00' 总体精度控制 调用 toPrecison 来返回代表限定数字有效位的字符串 var n = 12345.6789; n.toPrecision(1); // => 1e+4 n.toPrecision(3); // => 1.23e+4 n.toPrecision(5); // => 12346 (四舍五入) n.toPrecision(10); // => 12345.67890 (四舍五入) 科学计数法精度控制 调用 toExponential 返回代表限定小数点位数的科学计数法字符串 var n = 12345.6789; n.toExponential(1); // => '1.2e+4' n.toExponential(5); // => '1.23457e+4' n.toExponential(10); // => '1.2345678900e+4' n.toExponential( ); // => '1.23456789e+4' Math 获取数学常量e 通过 Math.E 获取数学常量 e console.log(Math.E); 自然对数 通过 Math.log(x) 获取 x 的自然对数 console.log(Math.log(10) Math.LN10); // => true 10的自然对数 通过 Math.LN10 获取10的自然对数 console.log(Math.LN10); 2的自然对数 通过 Math.LN2 获取 2 的自然对数 console.log(Math.LN2); 以2为底 e的对数 通过 Math.LOG2E 获取以2为底 e的对数 console.log(Math.LOG2E); 以 10 为底 e的对数 通过 Math.LOG10E 获取以10为底 e的对数 console.log(Math.LOG10E); 圆周率 通过 Math.PI 获取圆周率常量 console.log(Math.PI); 根号2 通过 Math.SQRT2 获取常量根号2 console.log(Math.SQRT2); 绝对值 调用 Math.abs 获取变量的绝对值 console.log(Math.abs(1)); // => 1 console.log(Math.abs(-1)); // => 1 余弦 调用 Math.cos 获取角度的余弦值 console.log(Math.cos(0.5)); // => 0.877... console.log(Math.cos(-0.5)); // => 0.877... 正弦 调用 Math.sin 获取角度的正弦值 console.log(Math.sin(0.5)); // => 0.497... console.log(Math.sin(-0.5)); // => -0.497... 正切 调用 Math.atan 获取角度的正切值 console.log(Math.tan(0.5)); // => 0.546... console.log(Math.tan(-0.5)); // => -0.546... 反余弦 调用 Math.acos 获取变量的反余弦值 console.log(Math.acos(0.5)); // => 1.047... console.log(Math.acos(-0.5)); // => 2.094... 反正弦 调用 Math.asin 获取变量的反正弦值 console.log(Math.asin(0.5)); // => 0.523... console.log(Math.asin(-0.5)); // => -0.523... 反正切 调用 Math.atan 获取变量的反正切值 console.log(Math.atan(0.5)); // => 0.523... console.log(Math.atan(-0.5)); // => -0.523... 大于或等于某数的最近整数 调用 Math.ceil 大于或等于某数的最近整数 console.log(Math.ceil(0.5)); // => 1 console.log(Math.ceil(-0.5)); // => 0 小于或等于某数的最近整数 调用 Math.floor 得到小于或等于某数的最近整数 console.log(Math.floor(0.5)); // => 0 console.log(Math.floor(-0.5)); // => -1 幂计算 调用 Math.pow(x,y) 返回 x 的 y 次方 console.log(Math.pow(2,3)); // => 8 console.log(Math.pow(3,2)); // => 9 四舍五入 调用 Math.round 返回四舍五入后的值 console.log(Math.round(2.3)); // => 2 console.log(Math.round(2.5)); // => 3 最大值 调用 Math.max 获得参数列表中最大的参数值 console.log(Math.max(2,4,3,-9); // => 4 最小值 调用 Math.min 获取参数列表中的最小的参数值 console.log(Math.min(2,4,3,-9); // => -9 随机数 调用 Math.random 返回一个范围在 0.0 与 1.0 之间的伪随机数 console.log(Math.random()! Math.random()); // => true Date 根据GMT时间获取绝对时间值 调用 Date.UTC(year, month, day, hours, minutes, seconds, ms) 来获取给定的 GMT 时间相对于 GMT 1970.1.1 的毫秒数 注意： year 为四位数 month 从 0开始（0表示一月） day可选参数，范围 1-31 hours可选参数，范围 0-23 minutes可选参数，范围 0-59 seconds可选参数，范围 0-59 ms可选参数，范围 0-999 console.log(Date.UTC(1970,0,1)); // => 0 console.log(Date.UTC(1970,0,1,0,0,0,1)); // => 1 创建一个 Date 对象 调用 new Date() 创建一个表示当前时间的 Date 对象 或 new Date(milliseconds) 创建一个举例 1970.1.1 GMT时间指定毫秒的 Date 对象 或 new Date(year,month,day,hours,minutes,seconds,ms) 创建一个指定本地时间的 Date 对象，参数格式要求同 Date.UTC console.log(new Date().toLocaleString()); // => "Fri Sep 09 2011 12:13:30 GMT+0800 (中国标准时间) 得到区域时间格式化表示 调用 date.toLocaleString() 得到时间对象的当前区域格式化表示（不同浏览器间可能不同） console.log(new Date().toLocaleString()); // => "Fri Sep 09 2011 12:13:30 GMT+0800 (中国标准时间)" 得到绝对毫秒值 调用 date.getTime() 得到当前时间实例距离 1970/1/1 GMT 的毫秒数 console.log(new Date().getTime()); // => 1315881421972 得到年 调用 date.getFullYear() 得到时间实例的当前区域四位年份表示 console.log(new Date().getFullYear()); // => 2011 得到月份 调用 date.getMonth() 得到时间实例的当前区域月份表示 注意：返回值范围为 0-11 , 0 表示一月 console.log(new Date().getMonth()); // => 8 (9 月) 得到日期 调用 date.getDate() 得到时间实例的当前区域的日期表示 console.log(new Date().getDate()); // => 13 得到星期 调用 date.getDay() 得到时间实例的当前区域的星期 注意：返回值范围为 0-6 , 0 表示星期天，1 表示星期一 ... console.log(new Date().getDay()); // => 2 (星期二) 得到时值 调用 date.getHours() 得到时间实例的当前区域的时数值 注意：返回值范围为 0-23 , 0 表示午夜12点. console.log(new Date().getHours()); // => 10 得到分值 调用 date.getMinutes() 得到时间实例的当前区域的分数值 注意：返回值范围为 0-59 console.log(new Date().getMinutes()); // => 56 得到秒数 调用 date.getSeconds() 得到时间实例的当前区域的秒数 注意：返回值范围为 0-59 console.log(new Date().getSeconds()); // => 13 得到毫秒值 调用 date.getMilliseconds() 得到时间实例的当前区域的毫秒位数值 注意：返回值范围为 0-999 console.log(new Date().getMilliseconds()); // => 564 得到 GMT 年 调用 date.getUTCFullYear() 得到时间实例的GMT标准时间四位年份表示 console.log(new Date().getUTCFullYear()); // => 2011 得到GMT月份 调用 date.getUTCMonth() 得到时间实例的GMT标准时间月份表示 注意：返回值范围为 0-11 , 0 表示一月 console.log(new Date().getUTCMonth()); // => 8 (9 月) 得到GMT日期 调用 date.getUTCDate() 得到时间实例的GMT标准时间日期表示 console.log(new Date().getUTCDate()); // => 13 得到GMT星期 调用 date.getUTCDay() 得到时间实例的GMT标准时间星期 注意：返回值范围为 0-6 , 0 表示星期天，1 表示星期一 ... console.log(new Date().getUTCDay()); // => 2 (星期二) 得到GMT时值 调用 date.getUTCHours() 得到时间实例的GMT标准时间时数值 注意：返回值范围为 0-23 , 0 表示午夜12点. console.log(new Date().getUTCHours()); // => 2 得到GMT分值 调用 date.getUTCMinutes() 得到时间实例的GMT标准时间分数值 注意：返回值范围为 0-59 console.log(new Date().getUTCMinutes()); // => 56 得到GMT秒数 调用 date.getUTCSeconds() 得到时间实例的GMT标准时间秒数 注意：返回值范围为 0-59 console.log(new Date().getUTCSeconds()); // => 13 得到GMT毫秒值 调用 date.getUTCMilliseconds() 得到时间实例的GMT标准时间毫秒位数值 注意：返回值范围为 0-999 console.log(new Date().getUTCMilliseconds()); // => 564 得到时区差异 调用 date.getTimezoneOffset() 得到GMT标准时区和当前时区的差异分钟数 console.log(new Date().getTimezoneOffset()); // => -480 , 8*60 , 北京处于东八区 设置绝对毫秒值 调用 date.setTime() 设置当前时间实例距离 1970/1/1 GMT 的毫秒数 console.log(new Date().setTime(1315881421972)); 设置年 调用 date.setFullYear() 设置时间实例在当前区域的年份 console.log(new Date().setFullYear(2011)); 设置月份 调用 date.setMonth() 设置时间实例在当前区域的月份 注意：参数范围为 0-11 , 0 表示一月 console.log(new Date().setMonth(8)); 设置日期 调用 date.setDate() 设置时间实例在当前区域的日期 console.log(new Date().setDate(13)); 设置时值 调用 date.setHours() 得到时间实例在当前区域的时值 注意：参数范围为 0-23 , 0 表示午夜12点. console.log(new Date().setHours(10)); 设置分值 调用 date.setMinutes() 设置时间实例在当前区域的分数值 注意：参数范围为 0-59 console.log(new Date().setMinutes(56)); 设置秒数 调用 date.setSeconds() 设置时间实例在当前区域的秒数 console.log(new Date().setSeconds(13)); 设置毫秒值 调用 date.setMilliseconds() 设置时间实例在当前区域的毫秒位数值 console.log(new Date().setMilliseconds(564)); 得到 GMT 年 调用 date.getUTCFullYear() 得到时间实例的GMT标准时间四位年份表示 console.log(new Date().getUTCFullYear()); // => 2011 得到GMT月份 调用 date.getUTCMonth() 得到时间实例的GMT标准时间月份表示 注意：返回值范围为 0-11 , 0 表示一月 console.log(new Date().getUTCMonth()); // => 8 (9 月) 得到GMT日期 调用 date.getUTCDate() 得到时间实例的GMT标准时间日期表示 console.log(new Date().getUTCDate()); // => 13 得到GMT星期 调用 date.getUTCDay() 得到时间实例的GMT标准时间星期 注意：返回值范围为 0-6 , 0 表示星期天，1 表示星期一 ... console.log(new Date().getUTCDay()); // => 2 (星期二) 得到GMT时值 调用 date.getUTCHours() 得到时间实例的GMT标准时间时数值 注意：返回值范围为 0-23 , 0 表示午夜12点. console.log(new Date().getUTCHours()); // => 2 得到GMT分值 调用 date.getUTCMinutes() 得到时间实例的GMT标准时间分数值 注意：返回值范围为 0-59 console.log(new Date().getUTCMinutes()); // => 56 得到GMT秒数 调用 date.getUTCSeconds() 得到时间实例的GMT标准时间秒数 注意：返回值范围为 0-59 console.log(new Date().getUTCSeconds()); // => 13 得到GMT毫秒值 调用 date.getUTCMilliseconds() 得到时间实例的GMT标准时间毫秒位数值 注意：返回值范围为 0-999 console.log(new Date().getUTCMilliseconds()); // => 564 设置GMT年 调用 date.setUTCFullYear() 设置时间实例在GMT标准时区的年份 console.log(new Date().setUTCFullYear(2011)); 设置GMT月份 调用 date.setUTCMonth() 设置时间实例在GMT标准时区的月份 注意：参数范围为 0-11 , 0 表示一月 console.log(new Date().setUTCMonth(8)); 设置GMT日期 调用 date.setUTCDate() 设置时间实例在GMT标准时区的日期 console.log(new Date().setUTCDate(13)); 设置GMT时值 调用 date.seUTCHours() 得到时间实例在GMT标准时区的时值 注意：参数范围为 0-23 , 0 表示午夜12点. console.log(new Date().setUTCHours(10)); 设置GMT分值 调用 date.setUTCMinutes() 设置时间实例在GMT标准时区的分数值 注意：参数范围为 0-59 console.log(new Date().setUTCMinutes(56)); 设置GMT秒数 调用 date.setUTCSeconds() 设置时间实例在GMT标准时区的秒数 console.log(new Date().setUTCSeconds(13)); 设置GMT毫秒值 调用 date.setUTCMilliseconds() 设置时间实例在GMT标准时区的毫秒位数值 console.log(new Date().setUTCMilliseconds(564)); RegExp 创建 通过 /code/flag 来创建正则表达式实例，其中 code 表示正则表达式，flag 表示该表达式的模式修饰符，包括 i（大小写模式） , m（多行模式） ,g（全局模式） console.log(/x/i); 查看全局模式 通过 reg.global 来判断该正则表达式是否设置了全局模式 console.log(/x/g.global); // => true console.log(/x/.global); // => false 查看大小写模式 通过 reg.ignoreCase 来判断该正则表达式是否设置了大小写不敏感 console.log(/x/.ignoreCase); // => false console.log(/x/i.ignoreCase); // => true 查看多行模式 通过 reg.multiline 来判断该正则表达式是否设置了多行模式 console.log(/x/.multiline); // => false console.log(/x/m.multiline); // => true 下次开始查找位置 通过 reg.lastIndex 来获取或设置带有全局模式的正则式下次开始查找的位置 var x=/x/g; console.log(x.lastIndex); // => 0 x.test("xyzxyz"); console.log(x.lastIndex); // => 1 通用模式匹配 调用 reg.exec 来对参数字符串进行通用模式匹配 如果匹配成功返回数组，数组第一项表示匹配的字符串，其余表示匹配分组，数组还具有 index 属性表示匹配字符串的开始下标，否则返回 null var x=/(j)ava\w*/g,result; while(result=x.exec("javascript is not java")){ console.log("匹配到：" + result0 + " 捕获分组 ："+result1+ " 位于： " + result.index + " 下次匹配开始于：" + x.lastIndex); } // 匹配到：javascript 捕获分组 ：j 位于： 0 下次匹配开始于：10 // 匹配到：java 捕获分组 ：j 位于： 18 下次匹配开始于：22 是否匹配字符串 调用 reg.test 来判断参数字符串是否匹配当前模式，相当于 reg.exec(str) != null var pattern = /java/i; pattern.test("JavaScript"); // => true pattern.test("ECMAScript"); // => false 全局变量（函数） null 特殊的空对象 false true NaN 特殊的数字，不等于任何数字包括自身 console.log(Number("x")) // => NaN console.log(NaN NaN); // => false Infinity 特殊的数字表示无穷大，运算溢出时返回 console.log(1/0); // => Infinity undefined 特殊值，表示不存在的变量或属性 parseInt 将字符串转化为整数 parseInt("12x") // => 12 parseFloat 将字符串转化为浮点数 parseFloat("12.98x") // => 12.98 isNaN 判断一个字符串或数字是否是非NaN数字 isNaN("12") // => false isNaN("12x") // => true isNaN(NaN) => true isNaN(Infinity) => false isFinite 判断一个字符串或数字是否是非 Infinity 或 -Infinity 或 NaN 数字 isFinite("12") // => true isFinite("12x") // => false isFinite(NaN) => false isFinite(Infinity) => false encodeURI 对 url 进行编码，除了以下字符外其它字符都被编码为 utf-8 格式的 %xx 1. ascii 字符和数字 2. - _ . ! ~ * ' ( ) 3. ; / ? : @ & = + $ , # encodeURI("http://www.taobao.com/?arg1=1&arg2=hello world"); // => "http://www.taobao.com/?arg1=1&arg2=hello%20world" decodeURI 对调用 encodeURI 后的 url 进行解码 decodeURI("http://www.taobao.com/?arg1=1&arg2=hello%20world"); // => "http://www.taobao.com/?arg1=1&arg2=hello world" encodeURIComponent 对 url 进行编码，除了以下字符外其它字符都被编码为 utf-8 格式的 %xx 1. ascii 字符和数字 2. - _ . ! ~ * ' ( ) encodeURIComponent("hello ?"); // => "hello%20%3f" decodeURIComponent 对调用 encodeURIComponent 后的 url 进行解码 decodeURIComponent("hello%20%3f"); // => "hello ?" setTimeout 延迟执行一个函数，返回一个可以用 clearTimeout 取消的句柄 setTimeout(function(){ alert("run"); // => 10 毫秒后执行 },10); clearTimeout 取消执行用 setTimeout 延迟的函数 var id=setTimeout(function(){ alert("run"); // => 永远不会执行 },10); clearTimeout(id); setInterval 定时重复执行某个函数，返回一个可以用 clearInterval 取消的句柄 var id=setInterval(function(){ alert("run"); // 每 10 毫秒执行一次 },10); clearInterval 取消 setInterval 定时重复执行的函数 var id=setInterval(function(){ alert("run"); // => 永远不会执行 },10); setInterval(id); console.log 调用 console.log 可在控制台打出参数信息 注意：ie6,7 需要安装 companionJS console.log("log"); // => 控制台打印出 "log" dom相关 document 可通过常量 document 的一些方法来获得节点实例 body 通过 document.body 来获得模块的根节点 getElementsByTagName 通过 document.getElementsByTagName 来获得模块的制定标签的节点集合 console.log(document.getElementsByTagName("a")); // => 得到模块内的全部链接节点 createElement 通过 document.createElement 来返回一个节点实例 console.log(document.createElement("button")); // => 返回一个按钮节点实例 createTextNode 通过 document.createTextNode来返回一个文本节点实例 console.log(document.createTextNode("button")); // => 返回一个文本节点，内容为 button createDocumentFragment 通过 createDocumentFragment 来返回一个节点碎片集合，然后可以通过往这个集合上添加节点，用于提高批量节点添加性能 console.log(document.createDocumentFragment()); Node 所有的节点实例都是从 Node 产生出来，都具备一下方法和属性 nodeType 返回整数，表明当前节点的类型，常用的含义如下 * 1 表示 element（元素） * 2 表示属性 * 3 表示元素或属性中的文本内容 * 4 表示文档中的 CDATA 区段（文本不会被解析器解析） * 5 表示实体引用元素 * 6 表示实体 * 7 表示处理指令 * 8 表示注释 * 9 表示整个文档 * 10 向为文档定义的实体提供接口 * 11 节点碎片集合 * 12 表示在 DTD 中声明的符号 console.log(document.createDocumentFragment().nodeType); // => 11 console.log(document.createTextNode("button").nodeType); // => 3 console.log(document.createElement("button").nodeType); // => 1 nodeName 返回字符串，返回节点的标签内容，文本节点则返回 "#text" console.log(document.createElement("button").nodeName); // => button console.log(document.createElement("div").nodeName); // => div firstChild 返回元素的第一个子节点 html: console.log(KISSY.DOM.query(".t1")0.firstChild.className); // => t2 lastChild 返回元素的最后一个子节点 html: console.log(KISSY.DOM.query(".t1")0.lastChild.className); // => t3 nextSibling 返回节点的下一个兄弟节点 html: console.log(KISSY.DOM.query(".t2")0.nextSibling.className); // => t3 previousSibling 返回节点的上一个兄弟节点 html: console.log(KISSY.DOM.query(".t3")0.previousSibling.className); // => t2 parentNode 返回节点的父亲节点 html: console.log(KISSY.DOM.query(".t3")0.parentNode.class); // => t1 childNodes 返回元素的全部子节点数组 html: console.log(KISSY.DOM.query(".t1")0.childNodes); // => [KISSY.DOM.query(".t2")0 , KISSY.DOM.query(".t3")0] clientWith 返回元素的可视区域宽度（不包括滚动条，边框以及被滚动的区域），类型整数 KISSY.DOM.query(".t1")0.clientWidth clientHeight 返回元素的可视区域高度（不包括滚动条，边框以及被滚动的区域），类型整数 KISSY.DOM.query(".t1")0.clientHeight offsetWith 返回元素的实际宽度（不包括被滚动的区域），类型整数 KISSY.DOM.query(".t1")0.offsetWidth offsetHeight 返回元素的实际高度（不包括被滚动的区域），类型整数 KISSY.DOM.query(".t1")0.offsetHeight scrollLeft 返回元素的向左滚动值，类型整数 KISSY.DOM.query(".t1")0.scrollLeft scrollTop 返回元素的向上滚动值，类型整数 KISSY.DOM.query(".t1")0.scrollTop scrollHeight 返回元素内容的实际高度（包含滚动区域），类型整数 KISSY.DOM.query(".t1")0.scrollHeight innerHTML 访问元素的所有子节点的 html 代码 html: console.log(KISSY.DOM.query(".t1")0.innerHTML); // => "" className 返回元素的class 属性值 html: console.log(KISSY.DOM.query(".test")0.className); // => "test warn" appendChild 调用 appendChild(node) 给当前元素添加一个子节点 html: KISSY.DOM.query(".t1")0.appendChild(document.createElement("span")); html: insertBefore 通过调用 parent.insertBefore(newNode,refNode) 将 newNode 插入到 refNode 前面 html: KISSY.DOM.query(".t1")0.insertBefore(document.createElement("span"),KISSY.DOM.query(".t3")0); html: removeChild 调用 parent.removeChild(node) 将 node 从 parent 中去除 html: KISSY.DOM.query(".t1")0.removeChild(KISSY.DOM.query(".t3")0); html: replaceChild 调用 parent.replaceChild(newNode,exsitNode) 将 exsitNode 替换为 newNode html: KISSY.DOM.query(".t1")0.replaceChild(document.createElement("span"),KISSY.DOM.query(".t3")0); html: getElementsByTagName 调用 parent.getElementsByTagName(tagName) 获取 parent 下标签名为 tagName 的节点数组 html: console.log(KISSY.DOM.query(".t1")0.getElementsByTagName("div")); // => [KISSY.DOM.query(".t4")0,KISSY.DOM.query(".t5")0] HTMLInputElement 代表输入框的节点( input ) 类型，可提供输入区域，包括以下属性和方法 value 可通过 value 属性获取用户的输入值或设置输入框的值 html: console.log(KISSY.DOM.query(".inp")0.value); // => 当前用户的输入值 type 可通过 type 属性获取输入框的类型，包括 checkbox ,radio ,text ，默认为 text 注意：该属性只读 html: console.log(KISSY.DOM.query(".inp")0.type); // => "text" console.log(KISSY.DOM.query(".inp2")0.type); // => "checkbox" name 可通过 name 属性获取输入框的名称属性 注意：该属性只读 html: console.log(KISSY.DOM.query(".inp")0.name); // => "inp_in" disabled 可通过 disabled 读取或设置输入框元素是否禁用（允许用户输入） html: console.log(KISSY.DOM.query(".inp")0.disabled); // => false KISSY.DOM.query(".inp")0.disabled = true; // => 用户将不能输入 console.log(KISSY.DOM.query(".inp")0.disabled); // => true readOnly 可通过 readOnly 读取或设置输入框元素是否只读（不允许用户输入） html: console.log(KISSY.DOM.query(".inp")0.readOnly); // => false KISSY.DOM.query(".inp")0.readOnly= true; // => 用户将不能输入 console.log(KISSY.DOM.query(".inp")0.readOnly); // => true checked 可通过 checked 读取或设置类型为 checkbox 或 radio 的输入框是否被选中 html: console.log(KISSY.DOM.query(".inp")0.checked); // => false KISSY.DOM.query(".inp")0.checked= true; // => 用户将不能输入 console.log(KISSY.DOM.query(".inp")0.checked); // => true HTMLSelectElement 代表 select 的节点类型。具有 HTMLInputElement 的所有属性和方法，还包括其他一些方法和属性 options 可获取select 元素的所有选择项数组，单个元素类型为 HTMLOptionElement html: 1 2 console.log(KISSY.DOM.query(".inp")0.options.length); // => 2 console.log(KISSY.DOM.query(".inp")0.options0.text); // => 1 console.log(KISSY.DOM.query(".inp")0.options0.value); // => 'one' selectedIndex 可获取或设置select 元素当前选中选项处于所有选项数组的下标 html: 1 2 console.log(KISSY.DOM.query(".inp")0.options.length); // => 2 console.log(KISSY.DOM.query(".inp")0.selectedIndex); // => 1 console.log(KISSY.DOM.query(".inp")0.options[KISSY.DOM.query(".inp")0.selectedIndex].text); // => "1" add 可通过 add 给当前 select 添加新的选项 html: 1 2 console.log(KISSY.DOM.query(".inp")0.options.length); // => 2 KISSY.DOM.query(".inp")0.add(new Option("text","value")); console.log(KISSY.DOM.query(".inp")0.options.length); // => 3 console.log(KISSY.DOM.query(".inp")0.options2.text); // => "text" console.log(KISSY.DOM.query(".inp")0.options2.value); // => "value" HTMLOptionElement 代表 select 的每个选项的节点类型，包括一下属性 text 类型字符串，选项的显示内容 value 类型字符串，选项代表的值 selected 代表该选项是否是对应select当前选中的项 淘宝类库 淘宝提供了一个基础类库，用于处理浏览器兼容性问题以及提供一些可以增强工作效率的快捷方法，下面对淘宝提供的基础类库 KISSY 的用法做下介绍 KISSY.DOM 提供了操作页面元素的兼容处理和快捷方法 query 通过 KISSY.DOM.query(selector) 来获取符合选择器字符串的页面元素数组. (selector 为选择器字符串数组，格式和 jquery 保持一致) html: console.log(KISSY.DOM.query(".t")); // => document.getElementById('t1'),document.getElementById('t3') text 通过 KISSY.DOM.text(selector) 来获取或设置匹配选择器的第一个节点的文本内容 参数也可以是通过query取得的节点 : KISSY.DOM.text(node) html: 123 456 console.log(KISSY.DOM.text(".t")); // => "123" console.log(KISSY.DOM.text(KISSY.DOM.query(".t")1)); // => "456" KISSY.DOM.text(".t","789"); console.log(KISSY.DOM.text(KISSY.DOM.query(".t")0)); // => "789" offset 通过 KISSY.DOM.offset(node) 获取或设置元素相对于文档根节点的位置对象，位置对象包括 left 与 top 两个数值属性 html: 123 var DOM = KISSY.DOM , t = DOM.query(".t")0; console.log(DOM.offset(t)); // => 可能：{ left:100 , top:200 } DOM.offset(t,{ left:200, top:300 }); console.log(DOM.offset(t)); // => 可能：{ left:200 , top:300 } hasClass 通过 KISSY.DOM.hasClass(node,cls) 判断元素 node 是否具有样式类 cls addClass 通过 KISSY.DOM.addClass(node,cls) 可以给元素 node 加上样式类 cls html: var DOM = KISSY.DOM , t = DOM.query(".t")0; console.log(DOM.hasClass(t,"custom")); // => false DOM.addClass(t,"custom"); console.log(DOM.hasClass(t,"custom")); // => true removeClass 通过 KISSY.DOM.removeClass(node,cls) 移除元素 node 上的样式类 cls html: var DOM = KISSY.DOM , t = DOM.query(".t")0; console.log(DOM.hasClass(t,"t")); // => true DOM.removeClass(t,"t"); console.log(DOM.hasClass(t,"t")); // => false KISSY.Event on 调用 KISSY.Event.on(node,eventName,fn) 给节点注册某个事件的处理器. var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")0; Event.on(t,"click",function(e){ alert("带有样式t的第一个元素被点击了"); }); remove 调用 KISSY.Event.remove(node,eventName,fn) 去除节点上某个事件的处理器 eventName , fn 可选 : eventName 指定 , fn 不指定时清除某个事件的所有处理器 eventName 不指定 , fn 不指定时清除节点所有事件的所有处理器 注意：fn 如果指定那么必须和调用 on 时的处理器函数一致 var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")0; function onClick(e){ alert("带有样式t的第一个元素被点击了"); } Event.on(t,"click",onClick); Event.remove(t,"click",onClick); // 点击元素 t 将不起作用 EventObject 当事件触发后，传递给事件处理器参数的事件对象类型 var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")0; Event.on(t,"click",function(e){ // e 是 EventObject 类型 }); 这种型的对象具备以下属性 type 事件类型，可从事件处理器中获取触发事件的类型 var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")0; Event.on(t,"click",function(e){ console.log(e.type); // => "click" }); target 类型 HTMLNode ,事件触发源节点，可用于事件委托情景的事件源头跟踪 pageX 类型 Number，事件触发时鼠标相对页面根节点横坐标的位置，仅在鼠标相关事件中有效. pageY 类型 Number，事件触发时鼠标相对页面根节点纵坐标的位置，仅在鼠标相关事件中有效. altKey 类型 Number，事件触发时是否按下了 Alt 键，仅在键盘相关事件中有效 ctrlKey 类型 boolean，事件触发时是否按下了 Ctrl 键，仅在键盘相关事件中有效 metaKey 类型 boolean，事件触发时是否按下了 mac 下的 meta 键，仅在键盘相关事件中有效 shiftKey 类型 boolean，事件触发时是否按下了 Shift 键，仅在键盘相关事件中有效 keyCode 类型 Number，事件触发时的按键数值，仅在键盘事件中有效 which 类型 Number，表示事件触发时鼠标的按键值 * 1 表示左键 * 2 表示中键 * 3 表示右键 currentTarget 类型 HTMLNode，表示事件触发所在当前节点. relatedTarget 类型 HTMLNode，表示事件触发所在相关节点，仅在 mouseover ,mouseout 时有效 UA KISSY.UA 表示用户浏览器版本信息的属性，不匹配用户浏览器的属性为undefined，具体包括 * UA.gecko : gecko 引擎版本号 * UA.webkit : webkit 引擎版本号 * UA.ie : ie 版本号 * UA.firefox : firefox 版本号 * UA.chrome : chrome 版本号 * UA.opera : opera 版本号 * UA.safari : safari 版本号 Anim KISSY.Anim 动画功能函数: KISSY.Anim(node,toStyle,duration,easing,callback) * node (HTMLNode): 将要动画的节点， * toStyle (Object): 结束样式对象，例如 { width:"100px",height:"100px"} * duration (Number): 动画持续时间，以秒为单位，默认 1 * easing (String) – 默认为 ‘easeNone’ , 动画平滑函数, 可取值 “easeNone”,”easeIn”,”easeOut”,”easeBoth”,”easeInStrong”, “easeOutStrong”,”easeBothStrong”,”elasticIn”,”elasticOut”, “elasticBoth”,”backIn”,”backOut”,”backBoth”, bounceIn”,”bounceOut”,”bounceBoth”. * callback (function) – 默认为 null , 动画结束后的回调函数，传入参数没有意义，不可用。 调用后返回动画控制对象，包括两个方法 run : 启动动画 stop(final) : 停止动画，final 设置为 true 则指定跳到结束样式 var DOM=KISSY.DOM , Anim=KISSY.Anim; var t = DOM.query(".t")0; var anim=Anim(t,{width:"100px",height:"100px"}); anim.run(); // t 元素使用渐变动画到 100*100 大小 示例与注意点 举例：鼠标经过某个元素时进行动画的效果，有两个注意点： 1. 需要绑定 mouseenter 事件而不是 mouseover 事件 Event.on(el,"mouseenter",fn); 2. 需要对上一个未完成的动画进行停止操作 var anim; function fn(){ if(anim){ anim.stop(); } // 启动动画 anim=Anim(xx); anim.run(); } KISSY.IO IO 调用 KISSY.IO({}) 可以发送ajax请求 可以使用的参数和例子如下。 S.io({ //'jsonpCallback '| string ': 指定 callback 的参数,请求 url 会生成 "url?callback={$jsonpCallback}" jsonCallback: "callback" //'string|json: 发起请求需要附加的数据,默认为 null data: {"p":1}, //''' function': 请求成功的回调,回调参数为 data(内容),textStatus(请求状态),xhr(ajax对象) success: function(data, textStatus, xhr) { //callback }, //'function''': 请求完成的回调，在 success 调用之后触发,参数同 success complete: function(data){ }, // 请求错误时的回调 error: functon(){ } }); 特别需要注意： 1: io接口的url 只限定在grid.taobao.com这个域名下面, 所以默认不需要配置url地址，由系统提供。: 2: io接口目前只提供jsonp的方式进行请求 所以上述代码最终实现为 浏览器向 url 为("http://grid.taobao.com/?p=1") 发起一个get请求，请求后返回的应该是一段javascript回调。